<template>
  <div class="home-study-index">
    <div class="scale-content">
      <Header style="background: none;" :isStudyCenter="true" :isGoBack="false" :width="1200">
        <template v-slot:left>
          <span class="weight-title study-weight-title">
            <el-dropdown @command="checkBook">
              <span class="el-dropdown-link">
                {{
                  checkedBookData && checkedBookData.book_id
                  ? checkedBookData.edition_name +
                  "-" +
                  checkedBookData.grade_name
                  : "同步课程"
                }}
                <i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in classData" :key="item.book_id + '' + index" :command="item">
                  {{ item.edition_name }}-{{ item.grade_name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </template>
        <template v-slot:center>
          <!-- <div class="mr25" @click="goRouteName('homework')">
            作业中心
          </div> -->
          <div class="mr25">
            <el-dropdown>
              <span class="el-dropdown-link">
                收藏中心
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="goRouteName('collectRead')">
                  阅读
                </el-dropdown-item>
                <el-dropdown-item v-if="checkedBookData.book_id == 585 ||
                  checkedBookData.book_id == 586
                  " :disabled="isDisabledGame || $store.getters.isTeacher"
                  @click.native="goRouteName('personalizedRead')">
                  个性化阅读
                </el-dropdown-item>
                <el-dropdown-item :disabled="isDisabledGame || $store.getters.isTeacher"
                  @click.native="goRouteName('synchronousExercise')">
                  同步练习
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="mr25">
            <el-dropdown>
              <span class="el-dropdown-link">
                功能中心
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item @click.native="goRouteName('help')">
                  帮助中心
                </el-dropdown-item> -->
                <el-dropdown-item :disabled="isDisabledGame || $store.getters.isTeacher"
                  @click.native="goRouteName('game')">
                  玩玩小游戏
                </el-dropdown-item>
                <el-dropdown-item :disabled="isDisabledGame || $store.getters.isTeacher"
                  @click.native="goRouteName('keyboardGame')">
                  消灭外星人
                </el-dropdown-item>
                <el-dropdown-item :disabled="isDisabledGame" @click.native="goKeyboard">
                  键盘训练
                </el-dropdown-item>
                <el-dropdown-item :disabled="isDisabledGame || $store.getters.isTeacher"
                  @click.native="goRouteName('typingGame')">
                  键盘练习
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div>
            <span> </span>
            <el-dropdown @command="logout">
              <span class="el-dropdown-link">
                个人中心
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item> 退出登录 </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
        <template v-slot:right>
          <span class="avatar">
            <div class="avatar-box">
              <el-avatar :size="80" fit="cover" :src="assetsURL + homePageData.logo" :key="homePageData.logo"
                class="avatar-default">
                <i class="iconfont icon-w_xuesheng-"></i>
              </el-avatar>
            </div>
            <div class="avatar-right">
              <div>
                {{ homePageData.nickname }}
              </div>
              <div class="block" @click="goStudent">
                关闭<img src="@/assets/img/close-circle.png" alt="" />
              </div>
            </div>
          </span>
        </template>
      </Header>
      <div class="home-content-top">
        <div class="home-content-top-left">
          <div class="item">
            <div class="title">
              学币情况：
            </div>
            <div class="lable">
              今日学币
            </div>
            <div class="value">
              {{ homePageData.today_integral }}
            </div>
          </div>
          <div class="item">
            <div class="lable">
              本周学币
            </div>
            <div class="value">
              {{ homePageData.week_integral }}
            </div>
          </div>
          <div class="item">
            <div class="lable">
              总学币
            </div>
            <div class="value">
              {{ homePageData.integral }}
            </div>
          </div>
        </div>
        <div class="home-content-top-right">
          <div class="lable">
            学习总时长：
          </div>
          <div class="value">
            {{ (homePageData.sum_time + addTime) | filterTime }}
          </div>
        </div>
      </div>
      <div class="zh-home-content-center">
        <ul class="zh-home-content-center-tabs">
          <li class="zh-home-content-center-tab" @click="tabSelect(1)"
            :class="[tabSelectStatus == 1 ? 'tab-active' : '']">
            单词
          </li>
          <li class="zh-home-content-center-tab" @click="tabSelect(2)"
            :class="[tabSelectStatus == 2 ? 'tab-active' : '']">
            同步
          </li>
          <li class="zh-home-content-center-tab" @click="tabSelect(3)"
            :class="[tabSelectStatus == 3 ? 'tab-active' : '']">
            阅读
          </li>
          <li class="zh-home-content-center-tab" @click="tabSelect(4)"
            :class="[tabSelectStatus == 4 ? 'tab-active' : '']">
            语法
          </li>
        </ul>
        <div class="tab-content-box">
          <div class="tab-content-first" v-show="tabSelectStatus == 1">
            <!-- 单词库 -->
            <div class="item first-item" :style="{
              filter:
                checkedBookData.book_id == 585 ||
                  checkedBookData.book_id == 586
                  ? ''
                  : 'grayscale(100%)',
            }">
              <button class="btn" v-if="checkedBookData.book_id == 585 ||
                checkedBookData.book_id == 586
                " @click="goStudeyCenter('wordBank')">
                单词库
              </button>
              <button class="btn no-click" v-else>
                单词库
              </button>
            </div>
            <!-- 单词速记王 || 自然拼读 -->
            <div class="item secend-item">
              <button class="btn" v-if="checkedBookData.book_id == 2070 ||
                checkedBookData.book_id == 2071
                " @click.stop="goRouteName('naturalSpell')">
                {{
                  checkedBookData.book_id == 2070 ? `自然拼读` : `拼读快速版`
                }}
              </button>
              <button @click="goStudeyCenter('word')" class="btn" v-else>
                单词速记王
              </button>
            </div>
            <!-- 单词量测试 &&  体验生词库-->
            <div class="item third-item">
              <div class="item-top">
                <button class="btn" @click="goStudeyCenter('vocabulary')">
                  单词量测试
                </button>
              </div>
              <!-- style="filter:grayscale(100%)" -->
              <div class="item-botton">
                <button @click="goStudeyCenter('experientialStudyCenter')" class="btn">体验生词库</button>
              </div>
            </div>
          </div>
          <div class="tab-content-secend" v-show="tabSelectStatus == 2">
            <!-- 同步句子 -->
            <div class="item first-item" :style="{
              filter:
                checkedBookData.permission == 0 &&
                  checkedBookData.list &&
                  checkedBookData.list[0] &&
                  checkedBookData.list[0].sentence_state
                  ? ''
                  : 'grayscale(100%)',
            }">
              <button class="btn" v-if="checkedBookData.permission == 0 &&
                checkedBookData.list &&
                checkedBookData.list[0] &&
                checkedBookData.list[0].sentence_state
                " @click="goSentence">
                同步句子
              </button>
              <button class="btn no-click" v-else>
                同步句子
              </button>
            </div>
            <!-- 同步课文 -->
            <div class="item secend-item" :style="{
              filter:
                checkedBookData.permission == 0 &&
                  checkedBookData.list &&
                  checkedBookData.list[0] &&
                  checkedBookData.list[0].text_state
                  ? ''
                  : 'grayscale(100%)',
            }">
              <button class="btn" v-if="checkedBookData.permission == 0 &&
                checkedBookData.list &&
                checkedBookData.list[0] &&
                checkedBookData.list[0].text_state
                " @click="goSyncText">
                同步课文
              </button>
              <button class="btn no-click" v-else>
                同步课文
              </button>
            </div>
            <!-- 同步练习 -->
            <div class="item third-item" :style="{
              filter:
                checkedBookData.permission == 0 &&
                  checkedBookData.list &&
                  checkedBookData.list[0] &&
                  checkedBookData.list[0].exercise_state
                  ? ''
                  : 'grayscale(100%)',
            }">
              <button class="btn" v-if="checkedBookData.permission == 0 &&
                checkedBookData.list &&
                checkedBookData.list[0] &&
                checkedBookData.list[0].exercise_state
                " @click="goSyncQuestion">
                同步练习
              </button>
              <button class="btn no-click" v-else>
                同步练习
              </button>
            </div>
          </div>
          <div class="tab-content-third" v-show="tabSelectStatus == 3">
            <div class="btn-box">
              <!-- 阅读 -->
              <button class="btn" v-if="checkedBookData.permission == 0 &&
                checkedBookData.book_id !== 600 &&
                checkedBookData.permission == 0 &&
                checkedBookData.book_id !== 2070 &&
                checkedBookData.book_id !== 2071
                " @click="goStudeyCenter('read')">
                阅读
              </button>
              <button
                class="btn no-click"
                v-else
                style="filter:grayscale(100%);"
              >
                阅读
              </button>
              <!-- 个性化阅读 -->
              <button class="bottom-btn btn" v-if="checkedBookData.book_id == 585 ||
                checkedBookData.book_id == 586
                " @click="goStudeyCenter('individuationRead')">
                个性化阅读
              </button>
              <button
                class="bottom-btn btn no-click"
                v-else
                style="filter:grayscale(100%);"
              >
                个性化阅读
              </button>
            </div>
          </div>
          <div class="tab-content-fourth" v-show="tabSelectStatus == 4">
            <div class="btn-box">
              <button class="btn" v-if="checkedBookData.permission == 0 &&
                checkedBookData.subject_id &&
                checkedBookData.subject_id !== 305 &&
                checkedBookData.subject_id !== 401 &&
                checkedBookData.book_id !== 2070 &&
                checkedBookData.book_id !== 2071
                " @click="goStudeyCenter('grammar')">
                语法通
              </button>
              <button
                class="btn no-click"
                v-else
                style="filter:grayscale(100%);"
              >
                语法通
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="home-content-botton">
        <div class="home-content-botton-left">
          <div class="progress">
            <div class="abs-contain">
              <div class="abs-number" v-if="onLineTimeData.today_online_time + addTime">
                {{
                  Math.min(
                    parseInt(
                      (onLineTimeData.today_use_time /
                        (onLineTimeData.today_online_time + addTime)) *
                      100
                    ),
                    100
                  )
                }}%
              </div>
              <div class="abs-text">今日时效</div>
            </div>
            <el-progress v-if="onLineTimeData.today_online_time + addTime" class="my_progress" type="circle"
              color="#EC7B32" :percentage="Math.min(
                parseInt(
                  (onLineTimeData.today_use_time /
                    (onLineTimeData.today_online_time + addTime)) *
                  100
                ),
                100
              )
                " :show-text="false" :stroke-width="12"></el-progress>
          </div>
          <div class="time">
            <p>
              今日有效时长:&nbsp;
              {{ onLineTimeData.today_use_time | filterTime }}
            </p>
            <p>
              今日在线时长:&nbsp;
              {{ (onLineTimeData.today_online_time + addTime) | filterTime }}
            </p>
          </div>
        </div>
        <div class="home-content-botton-right">
          <div class="item" @click="goOverallReport('first')">
            <img class="icon" :src="require('@/assets/img/study-index/five-icon-1.png')" alt="" />
            <div class="title">
              学习时长报告
            </div>
          </div>
          <div class="item" @click="goOverallReport('second')">
            <img class="icon" :src="require('@/assets/img/study-index/five-icon-2.png')" alt="" />
            <div class="title">
              课程进度报告
            </div>
          </div>
          <div class="item" @click="goOverallReport('1')">
            <img class="icon" :src="require('@/assets/img/study-index/five-icon-3.png')" alt="" />
            <div class="title">
              学习统计报告
            </div>
          </div>
          <div class="item" @click="goTestRecord">
            <img class="icon" :src="require('@/assets/img/study-index/five-icon-4.png')" alt="" />
            <div class="title">
              测试记录
            </div>
          </div>
          <div class="item" @click="goStudyReport">
            <img class="icon" :src="require('@/assets/img/study-index/five-icon-5.png')" alt="" />
            <div class="title">
              今日学情概览
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../../components/Header";
import { getHomeData, getClassData, getOnlineTime } from "../../api/index";

export default {
  data() {
    return {
      homePageData: {},
      classData: [],
      checkedBookData: {},
      onLineTimeData: {
        today_online_time: 0,
        today_use_time: 0,
        progessNum: 0,
      },
      nowTimeTimer: null,
      nowTime: new Date().getTime(),
      showReadBook: [572, 585, 586, 590],
    };
  },
  computed: {
    tabSelectStatus() {
      return this.$store.state.user.tabSelectStatus;
    },
    addTime() {
      let addTime = 0;
      if (
        this.nowTime &&
        this.$store.getters.startTime &&
        this.checkedBookData &&
        this.checkedBookData.book_id
      ) {
        addTime += parseInt(
          (this.nowTime - this.$store.getters.startTime) / 1000
        );
      }
      return addTime;
    },
    isDisabledGame() {
      if (this.classData.length == 1 && this.classData[0].book_id == 600) {
        return true;
      } else {
        return false;
      }
    },
  },
  components: {
    Header,
  },
  methods: {
    goTestRecord() {
      this.$router.push({
        name: "testRecord",
        query: {
          isIndex: true,
        },
      });
    },
    tabSelect(e) {
      this.$store.commit("setTabsStatus", e);
    },
    getOnlineTime() {
      let data = {
        // time: new Date().getFullYear() + "-" + (new Date().getMonth() + 1),
      };
      getOnlineTime(data).then((res) => {
        if (res.code == 200) {
          this.onLineTimeData = res.data;
          this.onLineTimeData.today_use_time =
            this.onLineTimeData.today_word_time +
            this.onLineTimeData.today_read_time +
            this.onLineTimeData.today_grammar_time +
            this.onLineTimeData.sentence_time;
          this.onLineTimeData.progessNum = 0;
          if (
            this.onLineTimeData.today_online_time &&
            this.onLineTimeData.today_use_time
          ) {
            this.onLineTimeData.progessNum = parseInt(
              (this.onLineTimeData.today_use_time /
                this.onLineTimeData.today_online_time) *
              100
            );
          }
        }
      });
    },
    logout() {
      this.$store.dispatch("LogOut");
    },
    async checkBook(data) {
      if (
        this.checkedBookData &&
        data.book_id != this.checkedBookData.book_id
      ) {
        await this.$store.dispatch("SetTimeEnglish", 1);
      }
      this.checkedBookData = data;
      localStorage.setItem("bookData", JSON.stringify(this.checkedBookData));
    },
    getClassData() {
      getClassData().then((res) => {
        if (res.code == 200 && res.data) {
          res.data = res.data.filter((item) => {
            return item.status == 0;
          });
          this.classData = res.data;
          this.checkedBookData =
            JSON.parse(localStorage.getItem("bookData")) || {};
          if (
            this.checkedBookData &&
            this.checkedBookData.book_id &&
            this.classData
          ) {
            let index = this.classData.findIndex((item) => {
              return item.book_id == this.checkedBookData.book_id;
            });
            if (index == -1) {
              localStorage.removeItem("bookData");
              this.checkedBookData = {};
            } else {
              this.checkBook(this.classData[index]);
            }
          }
          if (
            this.classData &&
            (!this.checkedBookData || !this.checkedBookData.book_id)
          ) {
            this.checkBook(this.classData[0]);
            return;
          }
        }
      });
    },
    getHomeData() {
      getHomeData().then((res) => {
        if (res.code == 200 && res.data) {
          this.homePageData = res.data;
          localStorage.setItem("XGBX_NICKNAME", res.data.nickname);
        }
      });
    },
    clickDev() {
      this.$alert("此功能正在开发中", "提示");
    },
    goKeyboard() {
      this.$router.push({
        name: "keyboard",
      });
    },
    goStudent() {
      let url = window.location.origin;
      // if (url.match(RegExp(/xiaoguobx/g))) {
      //   url = window.location.origin + "/student/";
      // } else {
      //   url = window.location.origin + "/student/";
      // }
      url = window.location.origin + "/student/";
      window.location.href = url;
    },
    goStudeyCenter(route) {
      if (!this.checkedBookData || !this.checkedBookData.book_id) {
        this.$alert("请先选择课程", "提示");
        return;
      }
      if (route == "individuationRead" || route == "wordBank") {
        if (
          this.checkedBookData.book_id == 585 ||
          this.checkedBookData.book_id == 586
        ) {
          this.$router.push({
            name: route,
          });
        } else {
          return;
        }
      }
      this.$router.push({
        name: route,
      });
    },

    goFunctionCenter() {
      this.$router.push({
        name: "functionCenter",
      });
    },
    goOverallReport(activeName) {
      this.$router.push({
        name: "overallReport",
        query: {
          activeName,
        },
      });
    },
    goStudyReport() {
      this.$router.push({
        name: "studyReport",
      });
    },
    goSentence() {
      this.$router.push({
        name: "sentenceStudyCenter",
      });
    },
    goSyncText() {
      this.$router.push({
        name: "textStudyCenter",
      });
    },
    goSyncQuestion() {
      this.$router.push({
        name: "questionStudyCenter",
      });
    },
    goRouteName(name) {
      this.$router.push({
        name,
      });
    },
  },
  async created() {
    // if (this.$store.getters.token) {
    //   await this.$store.dispatch("SetTimeEnglish", 1);
    // }
    this.getHomeData();
    this.getClassData();
    this.getOnlineTime();
    if (!this.$store.getters.isTeacher) {
      this.nowTimeTimer = setInterval(() => {
        this.nowTime = new Date().getTime();
      }, 1000);
    }
  },
  beforeDestroy() {
    clearInterval(this.nowTimeTimer);
  },
  watch: {
    "$store.state.user.startTime": {
      deep: true, //深度监听设置为 true
      handler: function () {
        this.getHomeData();
        this.getOnlineTime();
      },
    },
  },
};
</script>

<style scoped lang="scss">
.avatar-default {
  &.el-avatar {
    background: #ccc;

    i {
      display: inline-block;
      color: #eee;
      font-size: 1.2rem;
      margin-right: -0.08rem;
      margin-top: 0.1333rem;
    }
  }
}
</style>
